import 'package:flutter/material.dart';

class ButtonPage extends StatelessWidget {
//   const ButtonPage({Key? key}) : super(key: key); 不去掉报错

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("按钮演示页面"),
          actions: <Widget>[
            IconButton(icon: Icon(Icons.settings), onPressed: () {})
          ],
        ),
        floatingActionButton: FloatingActionButton(
          child: Icon(Icons.add),
          onPressed: () {
            print('FloatingActionButton');
          },
        ),
        floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
        body: Column(
            // 代码没提示是dart插件自动关闭了
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    RaisedButton(
                        child: Text("普通按钮"),
                        onPressed: () {
                          print("普通按钮");
                        }),
                    SizedBox(
                      width: 10,
                    ),
                    RaisedButton(
                        child: Text("有颜色按钮"),
                        color: Colors.blue,
                        textColor: Colors.white,
                        onPressed: () {
                          print("有颜色按钮");
                        }),
                  ]),
              Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    SizedBox(width: 10),
                    RaisedButton(
                        child: Text("有阴影按钮"),
                        color: Colors.blue,
                        textColor: Colors.white,
                        elevation: 10, // 阴影
                        onPressed: () {
                          print("有阴影按钮");
                        }),
                    SizedBox(width: 10),
                    RaisedButton.icon(
                        icon: Icon(Icons.search),
                        label: Text('图标按钮'),
                        color: Colors.blue,
                        textColor: Colors.white,
                        onPressed: null
                        // onPressed: (){

                        // },
                        ),
                  ]),
              SizedBox(height: 10),
              Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Container(
                      height: 50,
                      width: 200,
                      child: RaisedButton(
                          child: Text("设置按钮宽高"),
                          color: Colors.blue,
                          textColor: Colors.white,
                          elevation: 10,
                          onPressed: () {
                            print("设置按钮宽高");
                          }),
                    )
                  ]),
              SizedBox(height: 10),
              Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Expanded(
                        // flex
                        child: Container(
                      height: 50,
                      margin: EdgeInsets.all(10),
                      child: RaisedButton(
                          child: Text("自适应按钮"),
                          color: Colors.blue,
                          textColor: Colors.white,
                          elevation: 10,
                          onPressed: () {
                            print("自适应按钮");
                          }),
                    )),
                  ]),
              SizedBox(height: 10),
              Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    RaisedButton(
                        child: Text("圆角按钮"),
                        color: Colors.blue,
                        textColor: Colors.white,
                        elevation: 10,
                        shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(10)),
                        onPressed: () {
                          print("圆角按钮");
                        }),
                    Container(
                      height: 80,
                      child: RaisedButton(
                          child: Text("圆形按钮"),
                          color: Colors.blue,
                          textColor: Colors.white,
                          elevation: 10,
                          splashColor: Colors.red, // 长按显示的颜色
                          shape: CircleBorder(
                              side: BorderSide(color: Colors.white)),
                          onPressed: () {
                            print("圆形按钮");
                          }),
                    ),
                    // 扁平按钮
                    FlatButton(
                      child: Text('按钮'),
                      color: Colors.blue,
                      textColor: Colors.yellow,
                      onPressed: () {
                        print('FlatButton');
                      },
                    )
                  ]),
              SizedBox(height: 10),
              Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Expanded(
                        // flex
                        child: Container(
                      height: 50,
                      margin: EdgeInsets.all(10),
                      child: OutlineButton(
                          child: Text("注册"),
                          // color: Colors.blue,
                          // textColor: Colors.white,
                          onPressed: () {
                            print("自适应按钮");
                          }),
                    )),
                  ]),
              SizedBox(height: 10),
              // 按钮组
              Row(mainAxisAlignment: MainAxisAlignment.end, children: <Widget>[
                ButtonBar(
                  children: <Widget>[
                    RaisedButton(
                        child: Text("登录"),
                        color: Colors.blue,
                        textColor: Colors.white,
                        onPressed: () {
                          print("登录");
                        }),
                    OutlineButton(
                        child: Text("注册"),
                        // color: Colors.blue,
                        // textColor: Colors.white,
                        onPressed: () {
                          print("注册");
                        }),
                    MyButton(
                      text: '自定义按钮',
                      height: 60,
                      width: 100,
                      pressed: () {},
                    )
                  ],
                )
              ]),
              SizedBox(height: 10),
              Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Container(
                      height: 50,
                      width: 200,
                      child: MyButton(text: '自定义按钮', height: 60, width: 100, pressed: (){},)
                    )
                  ]
              ),
            ]));
  }
}

// 自定义按钮
class MyButton extends StatelessWidget {
  final text;
  final pressed;
  final double width;
  final double height;

  const MyButton(
      {this.text = '',
      this.pressed = null,
      this.width = 88.0,
      this.height = 33.0});

  @override
  Widget build(BuildContext context) {
    return Container(
      height: this.height,
      width: this.width,
      child: RaisedButton(
        child: Text(this.text),
        onPressed: this.pressed,
      ),
    );
  }
}
